@import './transition.scss';
@import './element-ui.scss';

* {
  margin: 0;
  padding: 0;
  outline: 0 !important;
}
 /* 自定义 element 暗黑模式 */
html.dark {
  /* wangEditor */
  --w-e-toolbar-color: #eeeeee;
  --w-e-toolbar-bg-color: #141414;
  --w-e-textarea-bg-color: #141414;
  --w-e-textarea-color: #eeeeee;
  --w-e-toolbar-active-bg-color: #464646;
  --w-e-toolbar-border-color: var(--el-border-color-darker);
  .w-e-bar-item button:hover,
  .w-e-menu-tooltip-v5::before {
    color: #eeeeee;
  }
   /* login */
 .u-login {
  background-color: #191919 !important;
  .login-box {
    background-color: rgb(0 0 0 / 80%) !important;
    .login-form {
      box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;
      .logo-text {
        color: var(--el-text-color-primary) !important;
      }
    }
  }
}
}

  
:root {
  // 主题色
  --el-color-main:var(--el-color-primary); 
  //  白色
  --u-white-color:#fff;
  --u-black-color:#000;
}



.el-button:hover{
  // background-color:var(--el-color-primary) !important;
  // transform: scale(1.2);
}


body {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
}

a {
  text-decoration: none;
}
i {
  font-style: normal;
}

.search-container{
  padding: 20px 20px 0 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}
.container {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.el-table th {
  background-color: #f5f7fa !important;
}

.plugins-tips {
  padding: 20px 10px;
  margin-bottom: 20px;
  background: #eef1f6;
}

.plugins-tips a {
  color: var(--el-color-primary);
}

.el-button + .el-tooltip {
  margin-left: 10px;
}

.mgb20 {
  margin-bottom: 20px;
}
.mgb10 {
  margin-bottom: 10px;
}
.mr10 {
  margin-right: 10px;
}


/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.move-enter-active,
.move-leave-active {
  transition: opacity 0.1s ease;
}

.move-enter-from,
.move-leave-to {
  opacity: 0;
}

.el-time-panel__content::after,
.el-time-panel__content::before {
  margin-top: -7px;
}

.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
  padding-bottom: 0;
}

[hidden] {
  display: none !important;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
// 左侧菜单样式
.u-sidebar{
  display: block;
	position: absolute;
	left: 0;
	top: 70px;
	bottom: 0;
	overflow-y: scroll;
  border-right: 1px solid var(--el-header-border-color);
  .sidebar-el-menu{
    box-sizing: border-box;
    .el-menu-item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: var(--el-menu-text-color) !important;

    }
    // 二级菜单
    .el-sub-menu{
      .el-sub-menu__title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: var(--el-menu-text-color) !important;
        background-color: var(--el-menu-bg-color) !important;
      }
      .el-menu{
        background-color: var(--el-menu-bg-color);
        overflow: hidden;
      }
      .el-menu-item{
        font-weight: 400;
        font-size: 15px;
        position: relative;
        padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level)* var(--el-menu-level-padding));
        white-space: nowrap;
      }
      .is-active{
        // background-color: #fff !important;
        // color: var(--el-color-main);
        // font-weight: bold;
      }
    }
    .is-active{
      color: var(--el-menu-active-color) !important;
      background-color: var(--el-menu-active-bg-color) !important;
      position: relative;
      box-sizing: border-box;
    }
    .is-active::before{
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      content: "";
      background-color: var(--el-color-primary);
      left: 0;
    }
    .el-sub-menu__title:hover{
      // background-color: var(--el-color-main);
      // color: #fff;
      // border-radius: 10px;
    }
    .el-menu-item:hover{
      background-color: var(--el-menu-hover-bg-color);
      color: var(--el-menu-hover-text-color)
    }
  }
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 240px;
}
.sidebar-el-menu {
  min-height: 100%;
}
/* 设备管理的一些公共样式 */
body{
  overflow: hidden;
}
.u-common-title-p{
  text-align: center;
  line-height: 32px;
  font-size: 18px;
  margin-bottom: 12px;
}
.u-search-header{
  // background: #fff;
  // border: 1px solid #ddd;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: auto;
  padding: 20px 20px;
  height: 68px;
  box-sizing: border-box;
}
.u-search-container{
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 5px;
  padding: 12px;
  height: calc(100% - 68px - 30px - 24px - 24px);
  // 有按钮的table
  .el-table{
    height: calc(100% - 32px - 48px) !important;
    .el-scrollbar__view{
      height: 100%;
    }
    /* overflow: scroll;  */
  }
  // 没按钮
  .u-nobtn-table{
    height: calc(100% - 48px) !important;
  }
  .pagination-container{
    padding: 8px !important;
  }
}
.el-overlay-dialog{
  overflow: hidden !important;
}

.dialog-title-box{
  padding:12px;
  border:2px solid #006438;
  margin-bottom: 24px;
  position: relative;
}
.dialog-title-box-title{
  position: absolute;
  height: 24px;
  top:-12px;
  left: 20px;
  // padding: 0 6px;
  font-size: 16px;
  font-weight: bold;
  background:white;
}
.u-f-fl{
  float: left;
}
.u-f-fr{
  float: right;
}
.u-h-100{
  height: 100%;
}
.u-w-100{
  width: 100%;
}
.u-btns-box{
  margin-bottom: 6px;
}

.span-tag{
  display: inline-block;
  margin:0 5px;
}

/* 整体滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
  height: 10px; /* 滚动条高度 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaa; /* 滑块颜色 */
  border-radius: 6px; /* 滑块圆角 */
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #999; /* 滑块悬停颜色 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
  border-radius: 6px; /* 轨道圆角 */
}

/* 滚动条角落 */
::-webkit-scrollbar-corner {
  background: #f1f1f1; /* 角落颜色 */
}

.bg-white{
  background-color: #fff;
}


// 移动端
//当宽度小于700的时候就是红色
@media (max-width:768px){

  #app{
  	width: 1920px;
  	}
    .wrapper{
     width: 1920px;
      .u-sidebar{
        width: 80px !important;
      }
      .content-box{
        width: calc(1920px - 80px) !important;
      }
    }
}